import axios from 'axios'
import './App.css'
import React, { Component } from 'react'



export class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            CodeList: [],
            BrandList: [
                {
                    code: 'A',
                    name: '奥迪',
                    series: ['A4', 'A6', 'A8', 'A3', 'A5', 'A7']
                },
                {
                    code: 'B',
                    name: '宝马',
                    series: ['X5', 'X6', 'X1', 'X3']
                },
                {
                    code: 'F',
                    name: '福特',
                    series: ['700', '708', '718', '728', '738', '748']
                },
                {
                    code: 'D',
                    name: '大众',
                    series: ['Civic', 'Coupe', 'Sedan', 'Suv']
                }
            ],
            priceList: [
                {
                    min: 2,
                    max: 4,
                    value: '2-4万'
                },
                {
                    min: 4,
                    max: 6,
                    value: '4-6万'
                },
                {
                    min: 6,
                    max: 8,
                    value: '6-8万'
                },
                {
                    min: 8,
                    max: 10,
                    value: '8-10万'
                },
            ],
            code: 'A',
            series: '',
            onSeries: '',
            price: {},
            list: [],
            flag: true
        }
    }

    componentDidMount() {
        this.getCode()
        this.getList()
    }
    componentDidUpdate(prevProps, prevState) {
        // 监听code、series、onSeries变化
        if (prevState.series !== this.state.series || prevState.onSeries !== this.state.onSeries || prevState.price !== this.state.price) {
            this.getList()
        }
    }
    getList() {
        let params = {
            pp: this.state.series,
            cx: this.state.onSeries,
            jg: this.state.price,
        }
        // console.log(params);
        axios.get('http://127.0.0.1:2001/list', { params })
            .then(res => {
                if (res.data.code === 200) {
                    console.log(res.data.data);
                    this.setState({
                        list: res.data.data
                    })
                }
                console.log(this.state.list);
            })
    }


    getCode() {
        let list = []
        for (let i = 65; i <= 90; i++) {
            list.push(String.fromCharCode(i))
        }
        this.setState({
            CodeList: list
        })
    }



    render() {
        const { CodeList, BrandList, flag } = this.state
        return (
            <div>
                <header>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <span>品牌：</span>

                        <ul className='code-abc'>
                            <li style={{ width: '35px' }} >热门</li>
                            <li style={{ width: '35px' }} onClick={() => {
                                //点击让series为空
                                this.setState({
                                    series: null,
                                    code: ''
                                })
                            }}>不限</li>
                            {
                                CodeList.map((item, index) => {
                                    // 鼠标点击将当前item传入code
                                    return <li key={index} onClick={() => {
                                        this.setState({
                                            code: item
                                        })
                                        console.log(item);
                                    }}>{item}</li>
                                })
                            }

                        </ul>
                    </div>

                    <div>
                        <ul className='brand-ul'>
                            {
                                BrandList.map((item, index) => {
                                    // 设置动态class将li标签隐藏 
                                    return <li key={index} className={this.state.code !== item.code ? 'active' : ''}
                                        // 鼠标点击将当前item.name传入series
                                        onClick={() => {
                                            console.log(item.name);

                                            this.setState({
                                                series: item.name
                                            })
                                            this.getList()
                                        }}
                                    >{item.name}</li>
                                })
                            }
                        </ul>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <span>车系：</span>
                        <ul className='series-ul'>
                            {
                                BrandList.map((item, index) => {
                                    let list = item.series
                                    return <li key={index} className={this.state.series === item.name ? '' : 'active'}>{list.map((item, index) => {
                                        return <span key={index} style={{ marginRight: '10px' }} onClick={() => {
                                            this.setState({
                                                onSeries: item
                                            })
                                            console.log(this.state.onSeries);
                                        }}>{item}</span>
                                    })}</li>
                                })
                            }
                        </ul>
                    </div>

                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <span>价格：</span>
                        <ul className='price-ul'>
                            {
                                this.state.priceList.map((item, index) => {
                                    return <li key={index} className={this.state.onSeries === item.value ? 'active' : ''}
                                        // 鼠标点击将当前item传入price
                                        onClick={() => {
                                            this.setState({
                                                price: item
                                            })
                                            console.log(this.state.price, 184);
                                        }}
                                    >{item.value}</li>
                                })
                            }
                        </ul>
                    </div>

                    <div>当前筛选条件：<span>{this.state.series}<button onClick={() => {
                        this.setState({
                            series: '',
                        })
                    }}>x</button></span> <span>{this.state.onSeries}<button onClick={() => {
                        this.setState({
                            onSeries: '',
                        })
                    }}>x</button></span> <span>{this.state.price.value}<button onClick={() => {
                        this.setState({
                            price: ''
                        })
                    }}>x</button></span> </div>

                </header>

                <main>
                    <button onClick={() => {
                        this.setState({
                            flag: true
                        })
                    }}>一个一行</button>
                    <button onClick={() => {
                        this.setState({
                            flag: false
                        })
                    }}>三个一行</button>

                    <ul className={flag ? "two" : "four"}>
                        {
                            this.state.list.map((item, index) => {
                                return <li key={index} style={{ marginBottom: '10px' }}> <img src="https://img0.baidu.com/it/u=2971980583,2416550152&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500" width={150} />  {item.pp} 价格：{item.jg}万 <span>{item.cx}</span></li>
                            })
                        }
                    </ul>
                </main>

            </div>
        )
    }
}

export default App